<!DOCTYPE html>


          


<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			div{
				cursor: pointer;
				margin: 10px 0;
				overflow-y: auto;
			}
			
			.c1{
				background-color: antiquewhite;
				font-size: 50px;
			}
			
			
		</style>
		
		<script>
			
			/**
			 * 操作网页  
			 * 
		
				
			 */
			
			//1 创建元素，追加到div(#d1)
			function myAppendChild(){
				//创建元素
				let h3 = document.createElement("h3");
				//向h3中添加内容 innerText
				h3.innerText = "动态添加的标题"
				
				
				let div = document.createElement("div");
				//向div中添加内容  innerHTML 复杂的html
				div.innerHTML = "<p>我是动态的div中的内容</p>"
				
				//操作样式
					
				
				
				//追加到div中
				//查找 div 
				let d1 = document.getElementById("d1");
				d1.appendChild(h3);
				d1.appendChild(div);
			}
			
			/**
			*  1  找到元素  创建元素  移除元素
			*  2  操作元素{
							 *   改变外观   样式
							 *   改变 行为  宽 高 位置
			   }*/
			function changeStyle(){
				let d2 = document.getElementById("d2");
				// let div = document.getElementsByTagName("div")[1];
				
				
				//class 
				// d2.className = "c1";
				
				
				//操作style 中的属性
				d2.style.backgroundColor = "#666";
				d2.style.fontSize = "40px";
				d2.setAttribute("times",100);
				
			}
			
			
			function myRemove(){
				let d3 = document.getElementById("d3");
				// d3.remove();
				
				//通过父元素 移除子元素
				
				
				// document.body.removeChild(d3);
				
				
				//隐藏
				d3.style.display = "none";
				
				
				
			}
			
		</script>
	
		
	</head>
	<body>
		<!-- <h3>请打开浏览器控制台，观察结果</h3> -->
			
				
		<button onclick="showScreen()">显示showScreen</button>

	 <div id="d1" onclick="myAppendChild()" style="width: 300px;height: 300px;border: solid 1px red;">

		
	</div>
	
	
	<div id="d2"  onclick="changeStyle()" style="width: 300px;height: 300px;border: solid 1px red;">
		111111
		
	</div> 
	
	<div id="d3"  onclick="myRemove()" style="width: 300px;height: 300px;border: solid 1px red;">
		
		即将移除的元素
		
		
	</div>
	
	


	
	</body>
</html>